<!--
 * @Author: [you name]
 * @Date: 2021-11-04 14:31:43
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-06 01:33:10
 * @Description: 
-->
<template>
  <div class="employeeDetails">
    <div style="display: flex">
      <el-avatar :size="90" :src="employee.userFace"></el-avatar>
      <div
        style="
          margin-left: 600px;
          margin-top: 70px;
          color: #2cb5ac;
          font-size: 14px;
        "
        @click="toReplace"
      >
        修改头像
      </div>
    </div>
    <el-divider></el-divider>
    <div>登陆用户 {{ employee.username }}</div>
    <div>用户姓名 {{ employee.realname }}</div>
    <div>用户姓名 {{ employee.telephone }}</div>
    <div>用户性别 {{ employee.gender }}</div>
    <div>用户角色 {{ employee.idCard }}</div>
    <div>用户生日 {{ employee.birth }}</div>
    <div>注册时间 {{ employee.registerTime }}</div>
    <div>邮箱 {{ employee.email }}</div>
    <div >用户状态 <span style="color:red;"> {{ employee.status }}</span></div>
    <el-divider></el-divider>

    <!-- 修改个人信息事件 -->
    <div
      style="
        margin-left: 600px;
        margin-top: 70px;
        color: #2cb5ac;
        font-size: 14px;
      "
      @click="toEditHandler"
    >
      修改个人信息
    </div>

    <!-- 修改头像模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="custForm">
        <el-upload
          class="avatar-uploader"
          
          action="http://81.69.24.232/pet/jz_upload.php"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
        <!-- 图片显示和上传地址路径：http://81.69.24.232/pet/jz_upload.php -->
          <img v-if="imageUrl" :src="this.employee.userFace" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toReplaceHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改个人信息模态框 -->
    <el-dialog title="修改个人信息" :visible.sync="visible">
      <el-form :model="employee" :rules="rules" ref="custForm">
        <el-form-item
          label="登陆用户"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="employee.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input
            v-model="employee.realname"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input
            v-model="employee.telephone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户邮箱"
          :label-width="formLabelWidth"
          prop="email"
        >
          <el-input
            v-model="employee.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户生日"
          :label-width="formLabelWidth"
          prop="birth"
        >
          <el-date-picker
            v-model="employee.birth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-radio v-model="employee.gender" label="male">男</el-radio>
          <el-radio v-model="employee.gender" label="female">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toReplaceHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import qs from "qs";
import _ from "lodash";
export default {
  data() {
    return {
      employee: {},
      // row:{}
      imageUrl: "",
      dialogVisible: false,
      visible: false,
      custom: {},
      formLabelWidth: "80px",
      title: "",
      rules: {
        
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  methods: {
    findemployee(id) {
      //   console.log(id);
      request
        .get("/baseUser/findUserDetailsById", {
          params: {
            id,
          },
        })
        .then((res) => {
          this.employee = res.data;
        });
    },
    // 修改头像事件
    toReplace() {
      this.dialogVisible = true;
    },
    // 头像上传事件
    handleAvatarSuccess(res, file) {
      // 将文件服务器响应的图片在线地址，设置到product
      this.employee.userFace = res;
      // 将成功上传的图片设置到预览标签上去
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //   头像修改的确定键事件
    toReplaceHandler() {
      this.$refs["custForm"].validate((valid) => {
        //   this.custom.roleId = 6;
        if (valid) {
        console.log(this.$route.query.id);
        const data = qs.stringify(this.employee);
        request.post("/baseUser/alterUserface", data).then((res) => {
          // 数据重载
          this.findemployee(this.$route.query.id);
          //关闭模态框
          this.dialogVisible = false;
          this.visible = false;
          // 提示成功操作的信息
          this.$message.success(res.message);
        });
        }else{
            return false;
        }
      });
    },
    // 修改个人信息
    toEditHandler(row) {
      this.custom = _.clone(row); //将当前行深拷贝后，显示到表单
      this.visible = true; //打开模态框
    },
  },

  created() {
    this.findemployee(this.$route.query.id);
  },
};
</script>
<style >
div {
  margin: 10px;
  color: gray;
  font-weight: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>